<!-- 登录 -->
<template>
  <div class="signinContainer">
    <div class="signiContent">
      <div class="title">找回密码</div>
      <div class="form">
        <van-form @submit="onSubmit">
          <van-field
            v-model="mobile"
            name="mobile"
            label=""
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />

          <van-field
            v-model="code"
            name="code"
            label=""
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
            <template #button>
              <van-button
                native-type="button"
                size="small"
                style="checking"
                type="primary"
                @click="checkingFn"
                >发送验证码</van-button
              >
            </template>
          </van-field>

          <van-field
            v-model="newpassword"
            type="password"
            name="newpassword"
            label=""
            placeholder="请输入新密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />

          <van-field
            v-model="newpasswordone"
            type="password"
            name="newpasswordone"
            label=""
            placeholder="请再次输入新密码"
            :rules="[{ required: true, message: '请再次填写密码' }]"
          />

          <div style="margin: 16px">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              color="#1FB470"
              class="button"
              >提 交</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { addResetpwd, smsSend } from "@/api/api.js";
export default {
  data() {
    return {
      mobile: "", // 电话
      code: "", // 验证码
      newpassword: "", // 密码
      newpasswordone: "", //二次密码
      checked: false,
    };
  },
  methods: {
    onSubmit(values) {
      if (this.newpassword != this.newpasswordone)
        return this.$toast.fail("密码填写不一致");
      console.log(values);
      addResetpwd(values).then((res) => {
        console.log("更改密码回调", res);
        this.$toast.success(res.msg);
        setTimeout(() => {
          this.$emit("operation", 0);
        }, 2000);
      });
    },
    checkingFn() {
      console.log("发送验证码");
      smsSend({ mobile: this.mobile, type: "3" }).then((res) => {
        this.$toast.success(res.msg);
        // this.code = res.data.code;
        console.log("发送验证码---", res);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  .signiContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .logo {
      margin-top: 30%;
    }

    .title {
      margin-top: 45px;
      letter-spacing: 2px;
    }
    .form {
      width: 80%;
      margin-top: 10%;

      .van-cell {
        background-color: transparent;
        color: #fff;
        margin-top: 10px;
        min-height: 45px;
      }
      /deep/ .van-field__control {
        color: #fff;
      }
      .button {
        margin-top: 30px;
        color: #fff;
        font-size: 1em;
        border-radius: 5px;
      }
      /deep/ .van-checkbox {
        margin-top: 30px;
        margin-left: 40px;
        text-align: center;
      }
      /deep/ .van-checkbox__label {
        color: #fff;
        font-size: 0.5em;
      }
      /deep/ .van-button--small {
        border: 1px solid #63d8a2;
        background-color: transparent;
        border-radius: 20px;
      }
    }
  }
}
</style>